<template>
    <div class="year-progress">
        <!-- 新历进度 -->
        <div class="bucket gregorian">
            <h3>新</h3>
            <div class="bucket-container">
                <div class="water-wrapper">
                    <div class="water" :style="{ height: `${gregorianProgress}%` }">
                        <div class="water-wave"></div>
                    </div>
                </div>
                <div class="percentage-display">
                    <span class="percentage">{{ gregorianProgress.toFixed(1) }}%</span>
                </div>
            </div>
        </div>

        <!-- 农历进度 -->
        <div class="bucket lunar">
            <h3>农</h3>
            <div class="bucket-container">
                <div class="water-wrapper">
                    
                    <div class="water" :style="{ height: `${lunarProgress}%` }">
                        <div class="water-wave"></div>
                    </div>
                </div>
                <div class="percentage-display">
                    <span class="percentage">{{ lunarProgress.toFixed(1) }}%</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Lunar, LunarYear } from 'lunar-javascript';

const today = new Date();
const currentYear = today.getFullYear();

// 格式化日期
const formatDate = (date) => {
    return new Intl.DateTimeFormat('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    }).format(date);
};

// 格式化农历日期
const formatLunarDate = () => {
    const lunar = Lunar.fromDate(today);
    return `${lunar.getYearInChinese()}年 ${lunar.getMonthInChinese()}月 ${lunar.getDayInChinese()}`;
};

// 计算新历进度
const getGregorianProgress = () => {
    const startOfYear = new Date(currentYear, 0, 1);
    const endOfYear = new Date(currentYear + 1, 0, 1);
    const totalDays = (endOfYear - startOfYear) / (1000 * 60 * 60 * 24);
    const elapsedDays = (today - startOfYear) / (1000 * 60 * 60 * 24);
    return (elapsedDays / totalDays) * 100;
};

// 计算农历进度
const getLunarProgress = () => {
    const lunarToday = Lunar.fromDate(today);
    const lunarYear = lunarToday.getYear();
    const lunarNewYear = Lunar.fromYmd(lunarYear, 1, 1, false);

    let elapsedDays = 0;
    let current = lunarNewYear;
    while (
        current.getYear() < lunarToday.getYear() ||
        current.getMonth() < lunarToday.getMonth() ||
        current.getDay() < lunarToday.getDay()
    ) {
        current = current.next(1);
        elapsedDays++;
    }

    const totalDays = LunarYear.fromYear(lunarToday.getYear()).getDayCount();
    return (elapsedDays / totalDays) * 100;
};

const gregorianProgress = ref(0);
const lunarProgress = ref(0);

onMounted(() => {
    // 添加加载动画
    setTimeout(() => {
        gregorianProgress.value = getGregorianProgress();
        lunarProgress.value = getLunarProgress();
    }, 10);
});
</script>

<style scoped>
.year-progress {
    display: flex;
    justify-content: center;
    font-size: 0.5rem;
    width: 90%;
    height: calc(100vh / 3);
    margin-left: 5%;
    /* gap: 2rem;
    padding: 2rem; */
    /* background: linear-gradient(135deg, #88a4c0 0%, #eef2f7 100%); */
    background-image: url("http://photo.fansimg.com/attachment/forum/202311/29/160600hmm8p8uu47jmlr44.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.bucket {
    position: relative;
    color: white;
    width: 30%;
    padding: 0.5rem;
    /* background: rgba(0, 0, 0, 0); */
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.bucket:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

.bucket h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    opacity: 0.4;
    margin-bottom: 1.5rem;
    text-align: center;
}

.bucket-container {
    position: relative;
    color: rgba(0, 0, 0, 0.06);
    width: 100%;
    height: 70%;
    margin: 0 auto;
    /* background: linear-gradient(145deg, #e6e9ef 0%, #f5f7fa 100%); */
    /* 文字透明化*/
    /* filter: blur(10px); */
    /* opacity: 0.8; */
    border-radius: 60px;
    overflow: hidden;
}

.water-wrapper {
    /* position: absolute; */
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 60px;
}

.water {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg, #4facfe 0%, #00f2fe 100%);
    transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.water-wave {
    position: absolute;
    top: -5px;
    left: 0;
    width: 200%;
    height: 10px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: wave 3s linear infinite;
}

.percentage-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.percentage {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.date-info {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 1rem;
    color: #64748b;
}

@keyframes wave {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }
}

/* 添加发光效果 */
.bucket-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.2),
            transparent);
    border-radius: 60px 60px 0 0;
}

@media (max-width: 768px) {
    .year-progress {
        flex-direction: column;
        padding: 1rem;
    }

    .bucket {
        width: 100%;
        margin-bottom: 1rem;
    }

    .bucket-container {
        width: 100px;
        height: 200px;
    }
}

/* 添加水滴动画 */
@keyframes droplet {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.water::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: translateX(-50%);
    animation: droplet 2s ease-in-out infinite;
}

/* 添加脉冲效果 */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(79, 172, 254, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(79, 172, 254, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(79, 172, 254, 0);
    }
}

.bucket:hover .bucket-container {
    animation: pulse 2s infinite;
}
</style>